import { Box, Divider, LegacyCard, ResourceItem, ResourceList, Text, VerticalStack } from "@shopify/polaris";
import reportTransform from "./transform";

const ReportTestingTargets = ({ hostNameVsSeverityMap }) => {

    const reportTestConfigurationData = reportTransform.prepareReportTestingTargetsData(hostNameVsSeverityMap);

    const renderItem = (item, id) => {
        return (
            <ResourceItem id={id}>
                <Text variant="bodySm" fontWeight="bold">{item.heading}</Text>
                <Box paddingBlockStart={1}>
                    {item.component}
                </Box>
            </ResourceItem>
        )
    }

    return (
        <LegacyCard>
            <Box paddingBlockEnd={4} background="bg-subdued">
                <LegacyCard.Header title={(<Text variant="headingSm">Issues</Text>)}/>
            </Box>
            <Divider />
            <ResourceList
                items={reportTestConfigurationData}
                renderItem={renderItem}
            />
        </LegacyCard>
    )
}

export default ReportTestingTargets;
